<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>固定定位</title>
		<style>
			*{margin: 0px;padding: 0;}
			body,
			html {
				height: 1000;
			}
			div {
				/* 必须有偏移,不然不生效
      淘宝顶部的搜索栏,兼容不太好,Ie不支持 
      顶部搜索栏的效果
      */
				position: sticky;
				top: 0;
				/* margin-top: 50px; */
				height: 40px;
				line-height: 40px;
				background-color: hotpink;
			}
		</style>
	</head>
	<body>
		<!-- 粘性
  效果,以屏幕做参考系,
  是相对定位,和固定定位的混合
  相对定位,占据位置,固定定位在某处不动  
  -->
		<div>我是标题</div>
		<p>我是p标签1</p>
		<p>我是p标签2</p>
		<p>我是p标签3</p>
		<p>我是p标签4</p>
		<p>我是p标签5</p>
		<p>我是p标签6</p>
		<p>我是p标签7</p>
		<p>我是p标签8</p>
		<p>我是p标签9</p>
		<p>我是p标签10</p>
		<p>我是p标签11</p>
		<p>我是p标签12</p>
		<p>我是p标签13</p>
		<p>我是p标签14</p>
		<p>我是p标签15</p>
		<p>我是p标签16</p>
		<p>我是p标签17</p>
		<p>我是p标签18</p>
		<p>我是p标签19</p>
		<p>我是p标签20</p>
		<p>我是p标签21</p>
		<p>我是p标签22</p>
		<p>我是p标签23</p>
		<p>我是p标签24</p>
		<p>我是p标签25</p>
		<p>我是p标签26</p>
		<p>我是p标签27</p>
		<p>我是p标签28</p>
		<p>我是p标签29</p>
		<p>我是p标签30</p>
		<p>我是p标签31</p>
		<p>我是p标签32</p>
		<p>我是p标签33</p>
		<p>我是p标签34</p>
		<p>我是p标签35</p>
		<p>我是p标签36</p>
		<p>我是p标签37</p>
		<p>我是p标签38</p>
		<p>我是p标签39</p>
		<p>我是p标签40</p>
		<p>我是p标签41</p>
		<p>我是p标签42</p>
		<p>我是p标签43</p>
		<p>我是p标签44</p>
		<p>我是p标签45</p>
		<p>我是p标签46</p>
		<p>我是p标签47</p>
		<p>我是p标签48</p>
		<p>我是p标签49</p>
		<p>我是p标签50</p>
		<p>我是p标签51</p>
		<p>我是p标签52</p>
		<p>我是p标签53</p>
		<p>我是p标签54</p>
		<p>我是p标签55</p>
		<p>我是p标签56</p>
		<p>我是p标签57</p>
		<p>我是p标签58</p>
		<p>我是p标签59</p>
		<p>我是p标签60</p>
		<p>我是p标签61</p>
		<p>我是p标签62</p>
		<p>我是p标签63</p>
		<p>我是p标签64</p>
		<p>我是p标签65</p>
		<p>我是p标签66</p>
		<p>我是p标签67</p>
		<p>我是p标签68</p>
		<p>我是p标签69</p>
		<p>我是p标签70</p>
		<p>我是p标签71</p>
		<p>我是p标签72</p>
		<p>我是p标签73</p>
		<p>我是p标签74</p>
		<p>我是p标签75</p>
		<p>我是p标签76</p>
		<p>我是p标签77</p>
		<p>我是p标签78</p>
		<p>我是p标签79</p>
		<p>我是p标签80</p>
		<p>我是p标签81</p>
		<p>我是p标签82</p>
		<p>我是p标签83</p>
		<p>我是p标签84</p>
		<p>我是p标签85</p>
		<p>我是p标签86</p>
		<p>我是p标签87</p>
		<p>我是p标签88</p>
		<p>我是p标签89</p>
		<p>我是p标签90</p>
		<p>我是p标签91</p>
		<p>我是p标签92</p>
		<p>我是p标签93</p>
		<p>我是p标签94</p>
		<p>我是p标签95</p>
		<p>我是p标签96</p>
		<p>我是p标签97</p>
		<p>我是p标签98</p>
		<p>我是p标签99</p>
		<p>我是p标签100</p>
	</body>
</html>
